import Wrapper from "./style";
import {Button, Tabs, TabsProps} from "antd";
import blank from "@/static/imgs/courseContent/blank.png";
const Information = () => {
    const topBtnStyle1 = {
        backgroundColor: "#ecf3fe",
        borderColor: "#b3cefb",
        color: "#4285f4",
        width: "144px",
        height: "36px",
        borderRadius: "20px",
        marginRight: "10px",
    }
    const topBtnStyle2 = {
        backgroundColor: "#00ca90",
        borderColor: "#00ca90",
        color: "#fff",
        width: "144px",
        height: "36px",
        borderRadius: "20px",
    }

    const NoData = () => {
        return (
            <div className="no-data">
                <img src={blank} alt=""/>
                <div>暂无数据</div>
            </div>
        )
    }

    const onChange = (key: string) => {
        console.log(key);
    };

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '学习资料',
            children: <NoData />,
        },
        {
            key: '2',
            label: '慕课资料',
            children: <NoData />,
        },
        {
            key: '3',
            label: '录屏录像',
            children: <NoData />,
        },
        {
            key: '4',
            label: '直播录像',
            children: <NoData />,
        },
    ];
    return (
        <Wrapper>
            <div className="top flex">
                <div className="left flex">
                    <div>共</div>
                    <div>0</div>
                    <div>个活动</div>
                </div>
                <div className="right">
                    <Button style={topBtnStyle1} type="primary">+ 新建文件夹</Button>
                    <Button style={topBtnStyle2} type="primary">+ 添加互动课件</Button>
                </div>
            </div>
            <div className="content">
                <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
            </div>
        </Wrapper>
    )
}
export default Information;